<template>
  <div class="DefSortConfig mt-4">
    <table class="my-table w-full">
      <thead class="thead">
        <th class="w-10" v-if="isAction">
          <Checkbox
            v-model:checked="checkAll"
            @change="onCheckAllChange"
            :indeterminate="indeterminate"
          />
        </th>
        <th class="w-10">序号</th>
        <template v-for="c in columns" :key="c.label"
          ><th :class="c.class">{{ c.label }} </th>
        </template>
        <th v-if="isAction">操作</th>
      </thead>

      <Draggable
        group="form-draggable"
        class="tbody"
        tag="tbody"
        :component-data="{
          tag: 'tbody',
          type: 'transition-group',
          name: 'list',
        }"
        ghostClass="moving"
        :animation="180"
        :list="data"
        handle=".th-drag"
        item-key="key"
      >
        <template #item="{ element: item, index }">
          <tr class="th-item">
            <td class="w-10" v-if="isAction"><Checkbox v-model:checked="item.check" /></td>
            <td class="w-10 th-drag"><Icon icon="carbon:drag-vertical" /> {{ index + 1 }}</td>
            <template v-for="tbItem in columns" :key="tbItem.label">
              <td>
                <template v-if="tbItem.component">
                  <div class="cell-item min-w-20" :class="tbItem.class" v-if="isShow(tbItem, item)">
                    <component
                      :is="tbItem.component"
                      v-model:value="item[tbItem.field]"
                      v-model:checked="item[tbItem.field]"
                      v-bind="
                        isFunction(tbItem.componentProps)
                          ? tbItem.componentProps({ data: item })
                          : tbItem.componentProps
                      "
                    />
                  </div>
                </template>
                <template v-else>
                  <div>
                    {{ item[tbItem.dataIndex] || item[tbItem.field] }}
                  </div>
                </template>
              </td>
            </template>
            <td v-if="isAction">
              <!-- <a-button type="link" @click.stop="handleEdit(item, index)">编辑</a-button> -->
              <a-button type="link" danger @click.stop="handleDel(index)">删除</a-button>
            </td>
          </tr>
        </template>
      </Draggable>
    </table>
    <div class="actions flex mt-2 mb-4" v-if="isAction">
      <a-button type="dashed" @click="handleAdd">新增</a-button>
      <a-button danger type="dashed" class="ml-4" @click="handleDelMutil">删除</a-button>
      <slot name="head"> </slot>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, computed, ref, watch } from 'vue';
  import { Checkbox, Select, Input, RadioGroup, Switch } from 'ant-design-vue';
  import { Icon } from '/@/components/Icon';

  import { ApiSelect, ApiRadioGroup } from '/@/components/Form';
  import { ColorPicker } from '/@/components/ColorPicker';
  import Draggable from 'vuedraggable';

  import { useMessage } from '/@/hooks/web/useMessage';
  import { isFunction, isNullOrUnDef } from '/@/utils/is';
  const column = [
    {
      label: '名称',
      field: 'label',
      component: 'Input',
      componentProps() {
        return { placeholder: '请输入名称' };
      },
    },
    {
      label: '名称编码',
      field: 'value',
      component: 'Input',
      componentProps() {
        return { placeholder: '请输入编码' };
      },
    },
  ];
  export default defineComponent({
    name: 'CommConfig',
    components: {
      Icon,
      Checkbox,
      Draggable,
      ApiSelect,
      Select,
      Input,
      RadioGroup,
      ColorPicker,
      ApiRadioGroup,
      Switch,
      InputTextarea: Input.TextArea,
    },
    props: {
      data: {
        type: Array as PropType<Recordable[]>,
        default: () => [],
      },
      columns: {
        type: Array as PropType<Recordable[]>,
        default: () => column,
      },
      isAction: {
        type: Boolean,
        default: true,
      },
    },
    emits: ['add', 'edit', 'del', 'delMutil'],
    setup(props, { emit }) {
      const { createMessage } = useMessage();

      const handleAdd = (record) => {
        emit('add', record);
      };
      const handleEdit = (record, index) => {
        record.index = index;
        emit('edit', record);
      };
      const handleDel = (index) => {
        emit('del', index);
      };
      const handleDelMutil = () => {
        const arr = props.data || [];
        const data = arr.filter((el) => el.check);
        if (!data.length) {
          createMessage.warn('请先选择要删除的列');
          return;
        }
        if (data.length === arr.length) {
          checkAll.value = false;
        }
        emit(
          'delMutil',
          arr.filter((el) => !el.check),
        );
      };

      const checkAll = ref(false);
      watch(
        () => props.data,
        (v) => {
          if (!v) return;

          if (!v.length) {
            checkAll.value = false;
            return;
          }

          const arr = v.filter((el) => !el.check);

          checkAll.value = !arr.length;
        },
        { deep: true },
      );
      const indeterminate = computed(() => {
        const arr = props.data || [];
        const len = arr.filter((el) => el.check).length;
        const allLen = arr.length;

        if (len === allLen) return false;
        return !!arr.find((el) => el.check);
      });

      const onCheckAllChange = (e) => {
        for (const item of props.data) {
          item.check = e.target.checked;
        }
      };
      const isShow = (field, item) => {
        if (isNullOrUnDef(field.ifShow)) return true;
        if (isFunction(field.ifShow)) {
          return field.ifShow(item);
        }

        return field.ifShow;
      };

      return {
        handleAdd,
        handleEdit,
        handleDel,
        handleDelMutil,
        indeterminate,
        checkAll,
        isFunction,
        onCheckAllChange,
        isShow,
      };
    },
  });
</script>
<style lang="less" scoped>
  .my-table {
    text-align: center;

    .thead {
      height: 51px;
      line-height: 51px;
      background: #edf3fc;
      box-shadow: 0px 4px 4px -3px #dde6f1, inset 0px 1px 4px -3px #35629a;
      border-bottom: 1px solid #bad3f1;
    }

    .th-item {
      padding: 12px 0;
      font-size: 14px;
      font-weight: 400;
      color: #262626;
      // line-height: 52px;
      height: 52px;

      &:hover {
        background: #f4f8ff;
        box-shadow: 0px 4px 4px -3px #e9edf3;
      }

      .th-drag {
        &:hover {
          cursor: grab;
          background: #edf3fc;
          box-shadow: 0px 4px 4px -3px #dde6f1, inset 0px 1px 4px -3px #35629a;
        }
      }
    }
  }
</style>
